<!-- 编辑页 -->
<template>
    <el-container
        v-loading="loading"
        element-loading-text="获取数据..."
        class="content-wrap not-select"
    >
        <el-header class="content-header">
            <edit-header />
        </el-header>
        <el-container class="content-container">
            <el-aside class="content-aside">
                <edit-left />
            </el-aside>
            <el-container>
                <el-main class="content-main">
                    <edit-main />
                </el-main>
            </el-container>
        </el-container>
    </el-container>
</template>

<script>
import { defineAsyncComponent, ref, onMounted } from 'vue'
import { useEditStore } from '@/store'
import { onBeforeRouteLeave } from 'vue-router'
import useEditKeydownEvents from '@/libs/edit/editKeydownEvents'
// import usePageHistory from '@/libs/edit/pageHistory'
import EditLeftLoading from './components/edit-left/edit-left-loading.vue'
import EditMainLoading from './components/edit-main/edit-main-loading.vue'
export default {
    name: 'edit',
    components: {
        EditHeader: defineAsyncComponent({ // 通过defineAsyncComponent，将应用分割成小一些的代码块
            loader: () => import('./components/edit-header'),
            suspensible: false // 定义组件是否可挂起(为false时可以控制自己的加载状态)
        }),
        EditLeft: defineAsyncComponent({ // 通过defineAsyncComponent，将应用分割成小一些的代码块
            loader: () => import('./components/edit-left'),
            loadingComponent: EditLeftLoading,
            suspensible: false // 定义组件是否可挂起(为false时可以控制自己的加载状态)
        }),
        EditMain: defineAsyncComponent({ // 通过defineAsyncComponent，将应用分割成小一些的代码块
            loader: () => import('./components/edit-main'),
            loadingComponent: EditMainLoading,
            suspensible: false // 定义组件是否可挂起(为false时可以控制自己的加载状态)
        })
    },
    setup() {
        const editStore = useEditStore()

        // const {
        //     onAddPageHistory
        // } = usePageHistory()

        const loading = ref(false)

        onMounted(async () => {
            loading.value = true
            await editStore.getAppData().then(() => {
                // onAddPageHistory()
            })
            loading.value = false

            // 页面刷新或关闭时显示提示信息
            window.onbeforeunload = e => {
                e = window.event || e 
                if (e) e.returnValue = '关闭提示'
                return '关闭提示'
            }

            // 创建键盘按下事件
            useEditKeydownEvents()
        })

        // 页面离开时显示提示信息
        onBeforeRouteLeave((to, from, next) => {
            const leave = confirm('您确定要离开吗？系统可能不会保持您所做的更改。')
            if (leave) {
                window.onbeforeunload = null
                next()
            } else {
                next(false)
            }
        })

        return {
            loading
        }
    }
}
</script>

<style lang="less">
@import './edit.less';
</style>

<style lang="less" scoped>
.content-wrap {
    height: 100%;
    .content-header {
        padding: 0;
        border-bottom: 1px solid var(--edit-border-color);
        z-index: 99;
    }
    .content-container {
        height: calc(100% - 60px);
    }
    .content-aside {
        width: auto;
        overflow: initial;
        border-right: 1px solid var(--edit-border-color);
        z-index: 98;
        // position: relative;
    }
    .content-main {
        background-color: var(--edit-main-background-color);
        padding: 0;
        // position: relative;
    }
}
</style>